<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="true">
    <div class="dashboard">
      <!-- 顶部标题栏 -->
      <header class="dashboard-header">
        <img src="../../assets/platform/header.png" />
        <div class="header-actions">
          <el-button @click="handleUserClick" type="text" icon="el-icon-user"
            >Admin</el-button
          >
          <el-button @click="doLogout" type="text" icon="el-icon-switch-button"
            >退出登录</el-button
          >
        </div>
      </header>

      <!-- 主要内容区域 -->
      <main class="dashboard-content">
        <!-- 左侧图表区域 -->
        <section class="dashboard-panel left-panel">
          <div class="chart-box">
            <div class="chart-title">旅游出行高峰时段分布</div>
            <tourismDistribution height="240px" width="22vw" />
          </div>
          <div class="chart-box">
            <div class="chart-title">旅游购物热门品类</div>
            <travelShopping height="240px" width="22vw" />
          </div>
          <div class="chart-box">
            <div class="chart-title">游客出行方式客流量</div>
            <touristTravel height="240px" width="22vw" />
          </div>
        </section>

        <!-- 中间地图区域 -->
        <section class="dashboard-panel center-panel">
          <ThreeJsMap />
        </section>

        <!-- 右侧图表区域 -->
        <section class="dashboard-panel right-panel">
          <div class="chart-box">
            <div class="chart-title">酒店评论数量排名</div>
            <hotelReviews height="240px" width="22vw" />
          </div>
          <div class="chart-box">
            <round height="240px" width="22vw" />
          </div>
          <div class="chart-box">
            <div class="chart-title">城市热度关键词</div>
            <cityPopularityKeywords height="240px" width="22vw" />
          </div>
        </section>
      </main>
    </div>
  </v-scale-screen>
</template>

<script>
import { mapActions } from 'vuex'
// import deviceCPU from './components/DeviceCPU.vue'
import ThreeJsMap from './components/ThreeJsMap.vue'
// import memoryRatio from './components/MemoryRatio.vue'
// import typeAndStatus from './components/TypeAndStatus.vue'
// import quantityAndRegion from './components/QuantityAndRegion.vue'
import tourismDistribution from './components/newCharts/tourismDistribution.vue'
import travelShopping from './components/newCharts/travelShopping.vue'
import touristTravel from './components/newCharts/touristTravel.vue'
import hotelReviews from './components/newCharts/hotelReviews.vue'
import round from './components/newCharts/round.vue'
import cityPopularityKeywords from './components/newCharts/cityPopularityKeywords.vue'

export default {
  name: 'index',
  components: {
    // deviceCPU,
    ThreeJsMap,
    // memoryRatio,
    // typeAndStatus,
    // quantityAndRegion,
    tourismDistribution,
    travelShopping,
    touristTravel,
    hotelReviews,
    round,
    cityPopularityKeywords
  },
  methods: {
    ...mapActions(['toggleSideBar', 'logout']),

    // 退出登录
    doLogout() {
      this.logout().then(() => {
        this.$router.push('/login')
        sessionStorage.clear()
        window.location.reload()
      })
    },

    // 跳转到设备管理
    handleUserClick() {
      this.$router.push('/workbench/device/deviceList')
    }
  }
}
</script>

<style lang="scss" scoped>
$header-height: 70px;
$panel-gap: 10px;
$chart-gap: 10px;
$border-color: #7cc7f5;
$border-radius: 6px;

.dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url('../../assets/platform/bg.png') no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

.dashboard-header {
  height: $header-height;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;

  img {
    max-height: 100%;
  }

  .header-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);

    .el-button {
      font-size: 20px;
      color: #fff;
    }
  }
}

.dashboard-content {
  flex: 1;
  display: flex;
  padding: 0 $panel-gap $panel-gap $panel-gap;
  overflow: hidden;
}

.dashboard-panel {
  border: 1px solid $border-color;
  border-radius: $border-radius;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.left-panel {
  width: 25%;
  background: url('../../assets/leftBackground.png') no-repeat;
  background-size: 100% 100%;
  padding: $chart-gap;
}

.center-panel {
  width: 50%;
  margin: 0 $panel-gap;
  display: flex;
  position: relative;
  overflow: hidden;

  canvas {
    width: 100% !important;
    height: 100% !important;
    outline: none;
  }
}

.center-panel ::v-deep > div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-panel {
  width: 25%;
  background: url('../../assets/rightBackground.png') no-repeat;
  background-size: 100% 100%;
  padding: $chart-gap;
}

.chart-box {
  flex: 1;
  margin-bottom: $chart-gap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  &:last-child {
    margin-bottom: 0;
  }
}

.chart-title {
  font-size: 16px;
  margin-bottom: 10px;
}

@media screen and (max-height: 800px) {
  $header-height: 60px;
  $chart-gap: 8px;
  $panel-gap: 8px;

  .dashboard-header {
    height: $header-height;
  }

  .dashboard-content {
    padding: 0 $panel-gap $panel-gap $panel-gap;
  }

  .left-panel,
  .right-panel {
    padding: $chart-gap;
  }

  .chart-box {
    margin-bottom: $chart-gap;
  }
}
</style>
